<template>
  <view class="template-login">
    <!-- 顶部自定义导航 -->
    <tn-nav-bar fixed alpha customBack>
      <view slot="back" class='tn-custom-nav-bar__back'
        @click="goBack">
        <text class='icon tn-icon-left'></text>
        <text class='icon tn-icon-home-capsule-fill'></text>
      </view>
    </tn-nav-bar>
    
    <view class="login">
      <!-- 顶部背景图片-->
      <view class="login__bg login__bg--top">
        <image class="bg" src="http://qiniucloud.qqdeveloper.com/login_top2123123123.jpg" mode="widthFix"></image>
      </view>
      <view class="login__bg login__bg--top">
        <image class="rocket rocket-sussuspension" src="http://qiniucloud.qqdeveloper.com/login_top3123123121231232.png" mode="widthFix"></image>
      </view>
      
      <view class="login__wrapper">
        
        <!-- 输入框内容-->
        <view class="login__info tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
          
          <view class="login__info__item__button tn-cool-bg-color-7--reverse" hover-class="tn-hover" @click="userLogin" :hover-stay-time="150">立即登录</view>
          
          <view v-if="currentModeIndex === 0" class="login__info__item__tips">请点击登录按钮，完成登录操作</view>
        </view>
        
      </view>
      
      
			<!-- 微信隐私鉴权保护弹窗开始 -->
			<!-- #ifdef MP-WEIXIN -->
			<privacy-popup ref="privacyComponent"></privacy-popup>
			<!-- #endif -->
			<!-- 微信隐私鉴权弹窗保护结束 -->
			
      <!-- 底部背景图片-->
      <view class="login__bg login__bg--bottom">
        <image src="https://tnuiimage.tnkjapp.com/login/1/login_bottom_bg.jpg" mode="widthFix"></image>
      </view>
    </view>
		
  </view>
</template>

<script>
  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	import PrivacyPopup from '@/components/privacy-popup/privacy-popup.vue'
	import { userLogin } from '@/utils/api/user'
  export default {
    name: 'login-demo-1',
		components: {
			PrivacyPopup
		},
    mixins: [template_page_mixin],
    data() {
      return {
        // 当前选中的模式
        currentModeIndex: 0,
      }
    },
    methods: {
			userLogin() {
				let _that = this
				uni.login({
					provider: 'weixin',
					success(res) {
						userLogin({
							code: res.code,
							platform: "mini_wechat"
						}).then(res => {
							uni.setStorageSync("login", res.token)
							uni.setStorageSync("userinfo", res.user)
							uni.navigateBack()
						})
					}
				})
			},
    }
  }
</script>

<style lang="scss" scoped>
  // @import '@/static/templatePage/custom_nav_bar.scss';
	@import "@/scss/custom_nav_bar.scss";
  /* 悬浮 */
  .rocket-sussuspension{
    animation: suspension 3s ease-in-out infinite;
  }
  
  @keyframes suspension {
    0%, 100% {
      transform: translate(0 , 0);
    }
    50% {
      transform: translate(-0.8rem , 1rem);
    }
  }
  
  .login {
    position: relative;
    height: 100%;
    z-index: 1;
    
    /* 背景图片 start */
    &__bg {
      z-index: -1;
      position: fixed;
      
      &--top {
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        
        .bg {
          width: 750rpx;
          will-change: transform;
        }
        .rocket {
          margin: 50rpx 28%;
          width: 400rpx;
          will-change: transform;
        }
      }
      
      &--bottom {
        bottom: -10rpx;
        left: 0;
        right: 0;
        width: 100%;
        // height: 144px;
        margin-bottom: env(safe-area-inset-bottom);
        
        image {
          width: 750rpx;
          will-change: transform;
        }
      }
    }
    /* 背景图片 end */
    
    /* 内容 start */
    &__wrapper {
      margin-top: 600rpx;
      width: 100%;
    }
    
    
    /* 登录注册信息 start */
    &__info {
      margin: 0 30rpx;
      margin-top: 105rpx;
      padding: 30rpx 51rpx;
      padding-bottom: 0;
      border-radius: 20rpx;
      background-color: #ffff;
      box-shadow: 0rpx 0rpx 0rpx 0rpx rgba(0, 3, 72, 0.1);
      
      &__item {
        &__button {
          margin-top: 75rpx;
          margin-bottom: 39rpx;
          width: 100%;
          height: 77rpx;
          text-align: center;
          font-size: 31rpx;
          font-weight: bold;
          line-height: 77rpx;
          letter-spacing: 1em;
          text-indent: 1em;
          border-radius: 39rpx;
          box-shadow: 1rpx 10rpx 24rpx 0rpx rgba(60, 129, 254, 0.35);
        }
        
        &__tips {
          margin: 30rpx 0;
          color: #AAAAAA;
        }
      }
    }
    /* 登录注册信息 end */
  }
  
  /deep/.input-placeholder {
    font-size: 24rpx;
    color: #E6E6E6;
  }
  
</style>
